<template>
  <div class="headNav">
    <div class="content">
      <div style="float: left">
        <!-- <div class="tou">
          <img src="../../../assets/mao.png" alt="" />
        </div> -->
        <router-link :to="{ path: '/index' }">
          <img
            style="width: 300px; height: 100px;vertical-align: middle; "
            src="../../../assets/mao.png"
            alt=""
          />
          <!-- <image
                 style="width: 232px; height: 60px;vertical-align: middle;"
                src="../../../assets/mao.png"
                ></image>  -->
        </router-link>
      </div>
      <div style="float: right">
        <!-- <el-popover
    placement="bottom"
    
    width="200"
    trigger="manual"
   v-model="visible"
   @blur="visible=! visible"
    > <ul>
      <li style="width:100%" v-for="item in restaurants" :key=item.isbn><router-link :to="{path: '/book',query:{id:item.isbn} }">{{item.title}}</router-link></li>
    </ul>
   <el-input slot="reference" placeholder="请输入书名/ISBN/出版社" v-model="input"  @focus="visible=true" @blur="visible=! visible" class="input-with-select">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
 
      
    
    
      <el-option label="书名" value="1"></el-option>
      <el-option label="ISBN" value="2"></el-option>
      <el-option label="出版社" value="3"></el-option>
    
    
    </el-select> 
    
     <el-button slot="append" icon="el-icon-search" @click="sousuo"> </el-button>
    
</el-input> 
 </el-popover> -->
        <el-select
          class="shousuo"
          v-model="select"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option label="ISBN" value="1"></el-option>
          <el-option label="出版社" value="2"></el-option>
          <el-option label="作者" value="3"></el-option>
          <el-option label="书名" value="4"></el-option>
        </el-select>
        <el-autocomplete
          class="inline-input"
          v-model="state"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
          value-key="title"
        ></el-autocomplete>

        <el-button
          slot="append"
          @click.native="sousuo"
          icon="el-icon-search"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HeadNav",
  data() {
    return {
      value: "",

      restaurants: [],
      input: "",
      select: "4",
      visible: false,
      state: "",
      timeout: null,
    };
  },
  methods: {
    async querySearchAsync(queryString, cb) {
      this.getList_name(queryString, this.select, 1, 100);

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        var results = queryString
          ? this.restaurants
              .slice(1, this.restaurants.length)
              .filter(this.createStateFilter(queryString))
          : restaurants;
        cb(results);
      }, 1000);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        ); //这里要大于-1才能进行模糊查找
      };
    },
    sousuo() {
      ;
      ;

      this.$router.push({
        path: "/book_list",
        query: { sousuo: 2, book: this.select, bookname: this.state },
      });
      this.$router.go(0);
    },
    getList_name(value, type, page, pageSize) {
      //根据图书书名查找
      axios
        .get("/fl-searchBook/searchBooksByElastSearch", {
          params: {
            searchType: type,
            keywords: value,
            page: page,
            pageSize: pageSize,
          },
        })
        .then((res) => {
          ;
          this.restaurants = res.data.data;
          if (this.restaurants.length == 0) {
            this.$set(this.restaurants, "title", "无匹配结果");
            this.$set(this.restaurants, "value", this.state);
          } else {
            if (type == 1) {
              for (let item of this.restaurants.slice(
                1,
                this.restaurants.length
              )) {
                this.$set(item, "value", item.isbn);
              }
            } else if (type == 2) {
              for (let item of this.restaurants) {
                this.$set(item, "value", item.bookPress);
              }
            } else if (type == 3) {
              for (let item of this.restaurants) {
                this.$set(item, "value", item.author);
              }
            } else {
              for (let item of this.restaurants.slice(
                1,
                this.restaurants.length
              )) {
                this.$set(item, "value", item.title);
              }
            }
            ;
          }

          ;
        });
    },
    getList_ISBN() {
      //根据图书ISBN查找
      axios
        .get("/fl-searchBook/searchBookByISBN", {
          params: {
            ISBN: this.input,
          },
        })
        .then((res) => {
          ;
          this.restaurants = res.data;

          ;
        });
    },
    getList_publishing() {
      //根据图书出版社查找
      axios
        .get("/fl-searchBook/searchBooksByPublishing", {
          params: {
            publishing: this.input,
          },
        })
        .then((res) => {
          ;
          this.restaurants = res.data.data;

          ;
        });
    },
    handleSelect(item) {
      ;
      this.$router.push({
        path: "/book",
        query: { id: item.isbn },
      });
      this.$router.go(0);
    },
  },
  mounted() {
    // this.restaurants = this.loadAll();
  },
  watch: {
    input() {
      if (this.select == 1) {
        this.getList_name();
      } else if (this.select == 2) {
        this.getList_ISBN();
      } else if (this.select == 3) {
        this.getList_publishing();
      } else if (this.input == " ") {
        return;
      } else {
        //用户不选择查询类型默认书名查询
        this.getList_name();
      }

      this.visible = true;
    },
  },
  created() {},
};
</script>

<style scoped>
.el-select  {

  height: 63px;
  width: 100px;
}
.el-input__icon {
  height: 150%;
}
img {
  margin-top: -20px;
}
.headNav {
  width: 100%;
  /* background-color:#F7FAFC; */
  line-height: 100px;
  clear: both;
}
.content {
  margin: 0px auto;
  width: 74%;
  height: 100px;
  /* background-color: #F7FAFC; */
}

</style>
